@use '@/styles/gobal.scss' as *;

.statCard {
    background: #fff;
    padding: $spacing-lg;
    border-radius: $border-radius-lg;
    box-shadow: $box-shadow;
    display: flex;
    align-items: center;
    gap: $spacing-lg;
    transition: transform $transition-duration, background-color $transition-duration;
    cursor: pointer;

    &:hover {
        transform: translateY(pxToRem(-2));
    }

    &__active {
        background: #e6f7ff;
    }

    &__icon {
        width: pxToRem(48);
        height: pxToRem(48);
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
            width: 100%;
            height: 100%;
            color: $primary-color;
        }
    }

    &__content {
        flex: 1;
    }

    &__count {
        font-size: pxToRem(28);
        font-weight: 600;
        color: $text-color;
        line-height: 1.2;
    }

    &__title {
        font-size: pxToRem(14);
        color: $text-color-secondary;
        margin-top: $spacing-xs;
    }
}